<template>
  <div class="add-edit-box" v-loading="loading">
    <div class="operate-btn">
      <div @click="back">返回</div>
      <div class="submit" @click="submitInfo">发布</div>
    </div>

    <div class="detail-main">
      <el-form :model="reportForm" label-width="120">
        <el-row>
          <el-col :span="18">
            <el-form-item label="报告标题">
              <el-input v-model="reportForm.reportTitle" placeholder="请输入报告标题"></el-input>
            </el-form-item>
            <el-form-item label="报告标签">
              <el-select v-model="reportForm.labelsData" placeholder="请选择报告标签" style="width: 100%;" multiple>
                <el-option :label="item.labels" :value="item.id" v-for="(item, index) of reportLabelsData" :key="index" />
              </el-select>
            </el-form-item>
            <el-form-item label="封面图" prop="coverImage">
              <ImageUpload v-model="reportForm.coverImage" :limit="1" sizeText="，尺寸比例为386*200" />
            </el-form-item>
            <el-form-item label="报告内容" v-if="isOriginal === 'Y'">
              <editor v-model="reportForm.reportContent" :min-height="192" />
            </el-form-item>
            <el-form-item label="报告时间">
              <el-date-picker
                clearable
                v-model="reportForm.reportDate"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择报告时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="报告附件" v-if="isOriginal === 'N'">
              <!--              <ImageUpload v-model="reportForm.reportAnnex" />-->
              <FileUpload :fileType="['pdf', 'ppt', 'pptx']" @success="uploadFile" :file-list="reportAnnexList" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import ImageUpload from "@/components/ImageUpload/imageUpload.vue";
import FileUpload from "@/components/FileUploadNew/index.vue";
import {addReport, updateReport} from "@/api/industryReport";
import {reportLabelsList} from "@/api/reportLabels";

const props = defineProps({
  reportDetail: {
    type: Object,
    default: () => {}
  }
})
const route = useRoute();
const router = useRouter();
const emit = defineEmits(['update']);
const isOriginal = route.query.isOriginal as string;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const reportLabelsData = ref<{id: string, labels: string}[]>([]);
const reportForm = ref<Record<string, any>>({});
const initForm = () => {
  return {
    id: '',
    reportTitle: '',
    labelsData: [],
    reportLabels: '',
    reportContent: '',
    reportDate: '',
    reportAnnex: '',
    coverImage: '',
    isOriginal: isOriginal
  }
};
const reportAnnexList = ref<string[]>([]);

function back() {
  if (!route.query.id) {
    router.push({name: "industryReport"});
  } else {
    emit("update");
  }
}

function uploadFile(arr: string[]) {
  reportForm.value.reportAnnex = arr.join(',')
}

function submitInfo() {
  if (loading.value) return;
  loading.value = true;
  reportForm.value.reportLabels = reportForm.value.labelsData.join(',');
  if (reportForm.value.id) {
    updateReport(reportForm.value).then((res) => {
      if (+res.code === 200) {
        proxy?.$modal.msgSuccess("更新成功");
        emit('update')
      }
    }).finally(() => loading.value = false)
  } else {
    addReport(reportForm.value).then((res) => {
      if (+res.code === 200) {
        proxy?.$modal.msgSuccess("发布成功");
        if (route.query.id) {
          emit('update')
        } else {
          router.push({name: "industryReport"});
        }
      }
    }).finally(() => loading.value = false)
  }
}

function getDetail() {
  reportForm.value = props.reportDetail?.id ? props.reportDetail : initForm();
  reportForm.value.labelsData = reportForm.value.reportLabels ? reportForm.value.reportLabels.split(',') : [];
  reportAnnexList.value = props.reportDetail.reportAnnex ? props.reportDetail.reportAnnex.split(',') : [];
}

function getReportLabelsData() {
  reportLabelsList('').then((res: any) => {
    reportLabelsData.value = res.rows || [];
  })
}

onMounted(() => {
  getReportLabelsData();
  getDetail();
});

defineComponent({name: 'ReportAddOrEdit'})
</script>

<style scoped lang="scss">
.add-edit-box {
  width: 100%;
  padding: 120px 30px 20px;
  background-color: #fff;

  .operate-btn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding-right: 210px;
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #fff;
    z-index: 9999;

    div {
      width: 140px;
      height: 50px;
      margin-left: 30px;
      text-align: center;
      font-size: 16px;
      color: #FF4350;
      line-height: 48px;
      border-radius: 10px;
      border: 1px solid #FF4350;
      cursor: pointer;
    }

    .submit {
      color: #fff;
      border: none;
      background: linear-gradient(296deg, #FF4350 0%, #FF4553 35%, #FFADB3 100%);
    }
  }
}
</style>
